<template>
  <div class="container">
    <a-card>
      <a-card-meta title="店铺设置">
        <template #description>请配置你的店铺名称和LOGO信息</template>
      </a-card-meta>
      <div class="card-content">
        <a-form
          :model="formState"
          name="basic"
          :label-col="{ span: 3 }"
          :wrapper-col="{ span: 8 }"
          autocomplete="off"
          @finish="onFinish"
          @finishFailed="onFinishFailed"
        >
        {{ formState.value }}
          <a-form-item
            label="店铺名称"
            name="name"
            :rules="[{ required: true, message: '店铺名称不能为空' }]"
          >
            <a-input
              class="h-form-input"
              :bordered="false"
              v-model:value="formState.name"
            />
          </a-form-item>

          <a-form-item
            label="店铺LOGO"
            name="coverPic"
            :rules="[{ required: true, message: '店铺LOGO不能为空' }]"
          >
            <a-upload
              accept=".jpg,.png,.gif,.jpeg,.bmp,.svg,.webp,.apng"
              name="avatar"
              list-type="picture-card"
              class="flex"
              :show-upload-list="false"
              :action="null"
              :before-upload="beforeUpload"
              @change="handleChange"
            >
              <a-image style="width:102px;height:102px" v-if="formState.coverPic" :src="formState.coverPic" alt="avatar" />
              <div v-else>
                <loading-outlined v-if="loading"></loading-outlined>
                <plus-outlined
                  :style="{ fontSize: '18px', color: '#E8ECF0' }"
                  v-else
                ></plus-outlined>
                <div class="ant-upload-text">上传店铺LOGO</div>
                <div class="ant-upload-text">仅支持.JPG.格式</div>
              </div>
            </a-upload>
          </a-form-item>
          <a-form-item
            label="主营业务"
            name="mainType"
            :rules="[{ required: true, message: '主营业务不能为空' }]"
          >
            <a-checkbox-group
              v-model:value="formState.mainType"
              :options="goodsTypeList"
            />
          </a-form-item>

          <a-form-item :wrapper-col="{ offset: 3, span: 8 }">
            <a-space>
              <a-button type="primary" html-type="submit">保存</a-button>
            </a-space>
          </a-form-item>
        </a-form>
      </div>
    </a-card>
  </div>
</template>
<script setup>
import { reactive, ref, onMounted } from "vue";
import { updateShopInfo } from "@/api/config";
import { message } from "ant-design-vue";
import { goodsType } from "@/api/order";
import { singleUploadsFile } from "@/api/upload";
import {getShopInfo} from '@/api/index'
import {
  PlusOutlined,
  LoadingOutlined,
  CheckCircleOutlined,
} from "@ant-design/icons-vue";
const goodsTypeList = ref([]);
const getGoodsType = async () => {
  const result = await goodsType();
  if (result.code == 200) {
    goodsTypeList.value = result.data.map((res) => {
      return {
        label: res.name,
        value: res.id,
      };
    });
  }
};
let formState = reactive({
  name: undefined,
  mainType: null,
  coverPic: undefined,
});
const onFinish = (values) => {
  console.log('保存 formState',formState);
  updateShopInfo(formState).then((res) => {
    message.info("保存成功");
  });
};
function beforeUpload(file) {
  //判断是否小于20M
  let isLt20M = file.size < 1024 * 1024 * 20;
  if (!isLt20M) {
    //将fileList中本次file文件删掉
    fileList.splice(fileList.indexOf(file), 1);
    message.error("所选文件单个超过20M，已自动过滤，请检查~");
  }
  return false;
}
const loading = ref(false);
const handleChange = (file) => {
  console.log(file);
  let formData = new FormData();
  formData.append("file", file.file);
  formData.append("type", "1");
  singleUploadsFile(formData).then((res) => {
    console.log(res);
    if (res.code == 200) {
      formState.coverPic = res.data;
    }
  });
};
const onFinishFailed = (errorInfo) => {
  console.log("Failed:", errorInfo);
};
const getShopInfoFn = async () => {
  const result = await getShopInfo()
  if(result.code == 200) {
    formState.coverPic = result.data.coverPic
    formState.mainType = result.data.mainTypes
    formState.name = result.data.name
  }
}
onMounted(() => {
  getGoodsType();
  getShopInfoFn()
});
</script>
<style lang="less" scoped>
.flex {
  display: flex;
  align-items: center;
}
.card-content {
  margin-top: 24px;
}
.ant-upload-text {
  margin-top: 8px;
  font-size: 12px;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #9599a5;
  line-height: 14px;
}
.h-form-input {
  background-color: #f3f5f7;
}
</style>
